<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<style>
			[v-cloak] {
				display: none;
			}
			
			.mui-btn {
				width: 120px;
				border: 1px solid #25CDDA;
				background-color: #25CDDA;
			}
			
			.mui-btn:active {
				border: 1px solid #58dde8!important;
				background-color: #58dde8!important;
			}
			
			.mui-table-view,
			.bg-img {
				background-image: url(../images/mainBg.jpg);
			}
			
			.mui-table-view-cell {
				height: 35px;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
			}
			
			button {
				outline: none;
			}
		</style>
	</head>

	<body class="bg-img">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title"></h1>
		</header>
		<div class="mui-content bg-img" id="aicVue" v-cloak>
			<div style="text-align: center;">
				<img :src="kjImg" alt="矿机" width="150px" height="150px"/>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div>
						<span class="dark-medium">矿机名称:</span>
						<span style="float: right;" class="dark-medium">{{kjname}}</span>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div>
						<span class="dark-medium">算力:</span>
						<span style="float: right;" class="dark-medium">{{kjSuanli}}</span>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div>
						<span class="dark-medium">矿机价格:</span>
						<span style="float: right;" class="dark-medium">{{kjPrice}}</span>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div>
						<span class="dark-medium">总收益:</span>
						<span style="float: right;" class="dark-medium">{{totalIncome}}</span>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div>
						<span class="dark-medium">每日收益:</span>
						<span style="float: right;" class="dark-medium">{{dayCome}}</span>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div>
						<span class="dark-medium">运行周期:</span>
						<span style="float: right;" class="dark-medium">{{totalDay}}</span>
					</div>
				</li>
				<li class="mui-table-view-cell" v-if="kjType == 5">
					<div>
						<span class="dark-medium" style="color: red;font-size: 10px;">购买极速矿机必须拥有一台运行中的矿机，微型矿机除外。</span>
					</div>
				</li>
			</ul>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary" @click="buy()">{{kjPrice}}购买</button>
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript">
			mui.init()
			var title = document.getElementById("title");
			var kuangjiid;

			var vm = new Vue({
				el: '#aicVue',
				data: {
					kjname: "",
					kjType: "",
					kjPrice: "",
					kjSuanli: "",
					totalDay: "",
					totalIncome: "",
					dayCome: "",
					status: "",
					kjImg: ""
				},
				mounted: function() {
					mui.plusReady(function() {
						swipeBack();
						//给detailPage赋值,根据ID获取详情页面
						kuangjiid = plus.webview.currentWebview().kuangjiid;
						vm.getKjDetail();
					});
				},
				methods: {
					getKjDetail: function() {
						var mdata = {
							"machineId": kuangjiid
						};
						mui.postParam(GetKjDetail, mdata, function(result) {
							mConsole.log("矿机详情：" + JSON.stringify(result));
							if(result.code == 0) {
								var machine = result.machine;
								vm.kjname = machine.machineName;
								vm.kjType = machine.machineType;
								vm.kjPrice = machine.price + " AIC";
								vm.kjSuanli = machine.hashSecond + " GH/S";
								vm.totalDay = machine.totalDays + " 天";
								vm.totalIncome = machine.totalProfit + " AIC";
								vm.dayCome = machine.dayProfit + " AIC";
								vm.status = machine.status;
								vm.kjImg = machine.machineImg;
								title.innerHTML = vm.kjname;
								return;
							}
							mymui(result.msg);
						});
					},
					buy: function() {
						var btnArray = ['取消', '确认'];
						mui.confirm('确认购买矿机?', '购买矿机', btnArray, function(e) {
							if(e.index == 1) {
								mui.postParam(BuyMachine, {
									"machineId": kuangjiid
								}, function(result) {
									if(result.code == 0) {
										mui.fire(plus.webview.getWebviewById('tabmy.html'), 'reLoadData');
										mui.toast("购买成功");
									} else {
										mymui(result.msg);
									}
								});
							}
						});
					}
				}
			});
		</script>
	</body>

</html>